<template>
  <view class="base-dropdown flexRowBetween" :style="{ paddingRight: optionsList.length == 1 ? '190rpx' : '50rpx' }">
    <u-dropdown class="u-dropdown" :active-color="activeColor" :inactive-color="inactiveColor" :height="height"
      :border-bottom="borderBottom" title-size="26" ref="uDropdown" @open="open" @close="close">
      <u-dropdown-item v-for="(item, i) in optionsList" :key="i" @change="change" v-model="item.value"
        :title="item.title" :options="item.options"></u-dropdown-item>
    </u-dropdown>
    <view class="num"> 数量：{{ num }} </view>
  </view>
</template>

<script>
export default {
  name: "BaseDropdown",
  props: {
    optionsList: {
      type: Array,
      default: [
        // {
        //   title: "状态(全部)",
        //   options: [
        //     { label: "全部", value: 0 },
        //     {
        //       label: "在线",
        //       value: 1,
        //     },
        //     {
        //       label: "离线",
        //       value: 2,
        //     },
        //   ],
        //   value: 0,
        // },
        // {
        //   title: "状态(全部)2",
        //   options: [
        //     { label: "全部2", value: 0 },
        //     {
        //       label: "在线2",
        //       value: 1,
        //     },
        //     {
        //       label: "离线",
        //       value: 2,
        //     },
        //   ],
        //   value: 0,
        // },
      ],
    },
    num: { type: Number | String, default: 0 },
  },
  data() {
    return {
      activeColor: "#0EADE2",
      inactiveColor: "#333333",
      height: "78",
      borderBottom: true,
      closeIndex: 0,
    };
  },
  methods: {
    open(index) {
      this.$refs.uDropdown.highlight(index);
    },
    close(index) {
      this.closeIndex = index;
      this.$refs.uDropdown.highlight(index);
    },
    change(index) {
      console.log(this.optionsList);
      this.optionsList[this.closeIndex].title =
        this.optionsList[this.closeIndex].options[index].label;
      this.$emit("change", this.optionsList);
    },
  },
  options: { styleIsolation: "shared" }, //组件必须加,才能修改内部样式
};
</script>

<style lang="scss" scoped>
.base-dropdown {
  background: $uni-bg-color;
  padding-right: 50rpx;
}

.u-dropdown {
  ::v-deep .u-dropdown__content {
    width: 100vw;
  }
}

.num {
  color: $themeComColor;
  font-size: $font-size-base;
}
</style>